<template>
    <div class="search">
        <div class="container">
            <div class="toplogo">
                <button class="comebreak" @click="$router.go(-1)">
                    <div class="left iconfont icon-arrow-left-bold"></div>
                </button>
                <div class="searchbox"  @click="$router.push('/search')">
                    <span>
                        <img class="auto-img" src="../assets/img/icon_news_search.png" alt="">
                    </span>
                    <input type="text" ref="inp" class="inp" placeholder="温暖的BaoBao" @keyup.enter="search" @keyup="delshow">
                    <span class="right" v-show="this.inpvle" @click="del">
                        <img src="../assets/img/delX.png" alt="" class="auto-img">
                    </span>
                </div>
                <p style="font-weight:bold;font-size:14px;" @click="searchbtn">搜索</p>
                
            </div>
            <div v-if="hisdata.length">
                <div class="history" >
                <div class="top">
                    <p>历史搜索</p>
                    <div class="clear" @click="clear">
                        <img src="../assets/img/删除.png" alt="" class="auto-img">
                    </div>
                </div>
                <div class="content">
                    <ul >
                        <li @click="add(item)" v-for="(item,index) in hisdata" :key="index">{{item}}</li>
                    </ul>
                </div>
            </div>
            </div>
            
            <div class="btm">
                <div class="top">热门搜索</div>
                <div class="content">
                    <ul>
                        <li @click="add(item)" v-for="(item,index) in hot" :key="index">{{item}}</li>
                    </ul>
                </div>
            </div>
            <!-- 如果搜索数据长度为0 并且  当为你推荐列表存在 !recommend=false-->
            <van-empty v-show="searchdata.length==0 && !recommend" image="search" description="没有找到该内容换个关键字试试吧~" />
            <div class="contentbox" v-if="searchdata">
                <!-- 搜索内容回车后该内容将隐藏  recommend改成false-->
                 <div class="hotmain" v-show="recommend">
                    <div class="titlebox1">
                        <div class="icon1">
                            <img src="../assets/img/推荐.png" alt="" class="auto-img">
                        </div>
                        <p>为你推荐</p>
                    </div>
                    <lists-page></lists-page>
                </div>
                <div class="hotmain" v-show="searchdata.length">
                    <div class="titlebox1">
                        <div class="icon1">
                            <img src="../assets/img/搜索类目.png" alt="" class="auto-img">
                        </div>
                        <p>搜索结果</p>
                    </div>
                        <div class="box_foot_lists">
                            <ul>
                            
                                <div v-for="(item) in searchdata" :key="item.id">
                                <router-link :to="'/details?id='+item.id" tag="li">
                                    <div class="titlebox">
                                        <div class="title">{{item.title}}</div>
                                        <div class="subtitle">
                                            <!-- 存在video数据或者有hot数据的加上con类名 -->
                                            <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                            <div>{{item.name}} {{item.time}}小时前</div>
                                        </div>
                                    </div>
                                    <div class="imgbox">
                                        <img :src="item.img" alt="" class="auto-img">
                                    </div>
                                    </router-link>
                                </div>
                            
                                
                            </ul>
                        </div>
                </div>
            </div>
           
            
        </div>
    </div>
</template>

<script>
import listsPage from '@/components/listsPage.vue'
import { getLists } from '../api/lists'
    export default {
        data() {
            return {
                lists:null,
                hisdata: [],//历史搜索
                searchdata:[],//搜索结果
                hot:['勇敢的人生','科技考古','渔博士'],//热门搜索词
                recommend:true,//为你推荐列表显示
                // searchnull:false,//
                inpvle:null,//清除叉叉默认隐藏
            };
        },
        methods:{
            //搜索按钮
            searchbtn(){
                this.searchFun();
                this.$refs.inp.value='';
                this.inpvle=null;
                
            },
            //热门搜索和历史搜索添加到输入框
            add(item){
                // 接收item ：热门和历史搜索词
                console.log(item);
                this.$refs.inp.value=item;
                this.searchFun();
                
            },
            //搜索方法
            searchFun(){
                //通过$refs找到ref为inp元素的值 搜索框的值
                let vle=this.$refs.inp.value;
                this.inpvle=vle;
                //内容不能为空
                if(!vle){
                    this.$toast("请输入内容再搜索")
                    return
                }
                //只要搜索了 为你推荐列表就隐藏
                this.recommend=false;
                this.searchdata=[];//清除上一次搜索结果
                this.lists.forEach(item=>{
                    if(item.title.indexOf(vle) != -1){ //存在关键字
                        //将关键字的内容添加进搜索结果数据中
                        this.searchdata.push(item);
                    }
                })
                //定义搜索框的值是否与历史搜索的值相同
                //寻找历史搜索里的每个数据的下标  找不到为-1
                var com=this.hisdata.findIndex(item=> item == this.$refs.inp.value);
                // console.log(com);
                // 如果不同才添加到历史记录
                if(com==-1){
                    this.hisdata.push(vle);   
                    window.localStorage.setItem('hisdata',JSON.stringify([this.hisdata]))
                    
                }
            },
            //搜索框回车进行搜索
            search(){
                this.searchFun();
                this.$refs.inp.value="";//清空搜索框的值
            },
            //清除输入框叉叉按钮显示隐藏
            delshow(){
                let vle=this.$refs.inp.value;
                this.inpvle=vle;
                
            },
            //清除输入框的值
            del(){
                this.$refs.inp.value="";
                //清除叉叉隐藏
                this.inpvle=null;
                //为你推荐显示
                this.recommend=true;
                //清除搜索结果
                this.searchdata=[];
            },
            // 点击清除搜索记录
            clear(){
                //清除localstorage里的历史搜索数据
                window.localStorage.removeItem("hisdata");
                //清除历史搜索
                this.hisdata = [];
                //清除搜索结果
                this.searchdata=[];
                //清空输入框的值
                this.$refs.inp.value='';
                this.recommend=true;//为你推荐显示
                this.inpvle=null;//清除叉叉隐藏
            },
            // 接收数据
            getListsFun(){
                getLists({id:this.$route.query.id}).then(data=>{
                    // 原列表页数据
                    this.lists=data.data;
                    console.log(this.lists);
                    //历史记录
                    this.hisdata=data.history;
                    // 搜索结果数据
                    this.searchdata=data.search;
                    console.log(Boolean(data.history.length));
                    if(window.localStorage.getItem("hisdata")){
                        this.hisdata=JSON.parse( window.localStorage.getItem("hisdata"))[0];
                    }
                })
            }
        },

        created(){
            this.getListsFun();
        },
        components: { listsPage },
        
    }
</script>

<style lang="scss" scoped>
.search{
    
    .toplogo {
        height: 40px;
        z-index: 999;
        padding: 5px 13px 2px 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        background-color: #fff;
        .left {
        width: 7.5%;
        height: 40px;
        line-height: 40px;
        font-size: 28px;
        
        }
    }
    .titlebox1{
        padding: 0 13px;
        display: flex;
        margin-top: 20px;
        font-size: 15px;
        font-weight: bold;
        .icon1{
            width: 20px;
        height: 20px;
        margin-right: 5px;
        }
    }
    .searchbox {
        // width: 240px;
        flex: 1;
        height: 33px;
        line-height: 33px;
        font-size: 13px;
        font-weight: 600;
        color: #b9b9b9;
        // padding: 0 11px;
        padding-left: 36px;
        padding-right: 18px;
        box-sizing: border-box;
        background-color: #f0f0f0;
        margin: 0 13px;
        border-radius: 15px;
        position: relative;
        & > span:first-child {
          position: absolute;
          left: 11px;
          top: 8px;
          width: 19px;
          height: 17px;
          display: block;
        }
        & > span.right{
            position: absolute;
            right: 11px;
            top: 5px;
            width: 24px;
            height: 24px;
            display: block;
        }
        .inp {
            width: 100%;
            border-radius: 15px;
            background-color: #f1f1f1;
            height: 30px;
            margin-right: 2.1%;
            
            font-size: 12px;
            color: #000;
            font-weight: bold;
            line-height: 30px;
            outline: none;
            border: 0;
        }
    }
    .history,
    .btm{
        margin-top: 35px;
        padding: 0 15px;
        font-size: 14px;
        font-weight: bold;
        .top{
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            .clear{
                width: 20px;
                height: 20px;
            }
        }
        .content{
            ul{
                min-width: 350px;
                max-width: 750px;
                width: 100%;
                margin-left: -6px;
                display: flex;
                flex-wrap: wrap;
                li{
                    margin: 5px;
                    font-size: 12px;
                    padding: 8px;
                    border-radius: 15px;
                    background-color: #f2f2f2;
                }
            }
        }
    }
    .box_foot_lists {
    margin-bottom: 10px;
    padding: 0 13px;
    ul {
      li {
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom:1px solid #ccc ;
        display: flex;
        justify-content: space-between;
        .titlebox {
          margin-right: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-weight: bold;
            margin-bottom: 16px;
            font-size: 15px;
          }
          .subtitle {
            display: flex;
            align-items: center;
            margin-left: -2px;
            div{
              color: #747474;
              font-weight: bold;
              font-size: 12px;
              transform: scale(0.9);
              margin-left: -1px;
              &.con {
                border: 1px solid red;
                border-radius: 5px;
                color: red;
                font-size: 12px;
                font-weight: bold;
                padding: 2px;
              
              }
            }
          }
        }
        .imgbox {
          flex: 0.6;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
  }
    
}
</style>